<template>
  <div class="points-channel-container">
    <div class="filter-section">
      <div class="filter-item">
        <span class="filter-label">渠道:</span>
        <el-select
          v-model="selectedChannel"
          placeholder="请选择"
          filterable
          remote
          :remote-method="filterChannels"
          :loading="loadingChannels"
          @change="updateChannelSubOptions"
        >
          <el-option label="全部" value=""></el-option>
          <el-option
            v-for="channel in filteredChannels"
            :key="channel.channel"
            :label="channel.channelDesc"
            :value="channel.channel"
          ></el-option>
        </el-select>
      </div>
      <div class="filter-item">
        <span class="filter-label">子渠道:</span>
        <el-select
          v-model="selectedChannelSub"
          placeholder="请选择"
          filterable
          remote
          :remote-method="filterChannelSubs"
          :loading="loadingChannelSubs"
        >
          <el-option label="全部" value=""></el-option>
          <el-option
            v-for="channelSub in filteredChannelSubs"
            :key="channelSub.channelSub"
            :label="channelSub.channelSubDesc"
            :value="channelSub.channelSub"
          ></el-option>
        </el-select>
      </div>
      <div class="filter-item">
        <span class="filter-label">状态:</span>
        <el-select v-model="selectedStatus" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option label="正常" value="1"></el-option>
          <el-option label="禁用" value="2"></el-option>
        </el-select>
      </div>
      <div class="filter-item">
        <span class="filter-label">用户ID:</span>
        <el-input v-model="userId" placeholder="请输入用户ID"></el-input>
      </div>
      <el-button type="primary" @click="searchPointsChannels">搜索</el-button>
    </div>
    <div class="table-section">
      <el-table :data="filteredPointsChannels" style="width: 100%" border>
        <el-table-column prop="id" label="编号" width="80"></el-table-column>
        <el-table-column prop="channel" label="渠道" width="120"></el-table-column>
        <el-table-column prop="channelDesc" label="渠道描述" width="150"></el-table-column>
        <el-table-column prop="channelSub" label="子渠道" width="150"></el-table-column>
        <el-table-column prop="channelSubDesc" label="子渠道描述" width="180"></el-table-column>
        <el-table-column prop="points" label="积分值" width="120"></el-table-column>
        <el-table-column label="状态" width="120">
          <template slot-scope="scope">
            <span :class="getStatusClass(scope.row.status)">{{ getStatusText(scope.row.status) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="180"></el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="editChannel(scope.row)">编辑</el-button>
            <el-button size="mini" :type="scope.row.status === '1' ? 'danger' : 'primary'" @click="toggleStatus(scope.row)">
              {{ scope.row.status === '1' ? '禁用' : '启用' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import requestUtil from '../../network/request'

export default {
  name: 'PointsChannelManagement',
  data() {
    return {
      channels: [],
      channelSubOptions: [],
      selectedChannel: '',
      selectedChannelSub: '',
      selectedStatus: '',
      userId: '',
      pointsChannels: [],
      filteredPointsChannels: [],
      filteredChannels: [],
      filteredChannelSubs: [],
      loadingChannels: false,
      loadingChannelSubs: false,
    };
  },
  mounted() {
    this.fetchChannels();
    this.fetchSubChannels();
  },
  methods: {
    fetchChannels() {
      requestUtil.post('/pointsChannel/list', {}).then(res => {
        if (res.code === '0') {
          this.channels = res.result.pointsChannelDetails;
          this.filteredChannels = this.channels;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    updateChannelSubOptions() {
      if (this.selectedChannel) {
        const selectedChannelDetail = this.channels.find(channel => channel.channel === this.selectedChannel);
        this.channelSubOptions = selectedChannelDetail ? selectedChannelDetail.channelSubList : [];
        this.filteredChannelSubs = this.channelSubOptions;
      } else {
        this.channelSubOptions = [];
        this.filteredChannelSubs = this.channels.flatMap(channel => channel.channelSubList);
      }
    },
    fetchSubChannels() {
      const params = {
        channel: this.selectedChannel,
        channelSub: this.selectedChannelSub,
        status: this.selectedStatus,
        userId: this.userId,
        currentPage: 1,
        size: 10,
      };

      requestUtil.post('/pointsChannel/subList', params).then(res => {
        if (res.code === '0') {
          this.pointsChannels = res.result.pointsChannelSubDetails;
          this.filteredPointsChannels = res.result.pointsChannelSubDetails;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    searchPointsChannels() {
      this.fetchSubChannels();
    },
    filterChannels(query) {
      if (query !== '') {
        this.loadingChannels = true;
        setTimeout(() => {
          this.loadingChannels = false;
          this.filteredChannels = this.channels.filter(channel => channel.channelDesc.toLowerCase().includes(query.toLowerCase()));
        }, 200);
      } else {
        this.filteredChannels = this.channels;
      }
    },
    filterChannelSubs(query) {
      if (query !== '') {
        this.loadingChannelSubs = true;
        setTimeout(() => {
          this.loadingChannelSubs = false;
          if (this.selectedChannel) {
            this.filteredChannelSubs = this.channelSubOptions.filter(channelSub => channelSub.channelSubDesc.toLowerCase().includes(query.toLowerCase()));
          } else {
            this.filteredChannelSubs = this.channels.flatMap(channel => channel.channelSubList).filter(channelSub => channelSub.channelSubDesc.toLowerCase().includes(query.toLowerCase()));
          }
        }, 200);
      } else {
        this.filteredChannelSubs = this.channelSubOptions;
      }
    },
    getStatusClass(status) {
      switch (status) {
        case '1':
          return 'status-normal';
        case '2':
          return 'status-disabled';
        default:
          return '';
      }
    },
    getStatusText(status) {
      switch (status) {
        case '1':
          return '正常';
        case '2':
          return '禁用';
        default:
          return '未知状态';
      }
    },
    editChannel(row) {
      // 这里可以添加编辑逻辑
      console.log('编辑渠道:', row);
    },
    toggleStatus(row) {
      // 这里可以添加禁用/启用逻辑
      console.log('切换状态:', row);
    },
  },
};
</script>

<style scoped>
.points-channel-container {
  padding: 20px;
}

.filter-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.filter-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
  margin-bottom: 10px;
}

.filter-label {
  margin-right: 10px;
}

.filter-section .el-select {
  width: 150px;
}

.filter-section .el-input {
  width: 200px;
}

.filter-section .el-button {
  margin-left: 10px;
}

.table-section {
  width: 100%;
}

.status-normal {
  color: #28a745;
}

.status-disabled {
  color: #dc3545;
}
</style>
